<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- /汽车列表 开始 -->
    <section class="container">
      <header class="comm-title">
        <h2 class="fl tac">
          <span class="c-333">全部汽车</span>
        </h2>
      </header>
      <section class="c-sort-box">
        <section class="c-s-dl">
          <dl>
            <dt>
              <span class="c-999 fsize14">汽车类别</span>
            </dt>
            <dd class="c-s-dl-li">
              <ul class="clearfix">
                <li>
                  <a title="全部" href="#">全部</a>
                </li>
                <li v-for="(item,index) in categoryOne" :key="index">
                  <a :title="item.name" href="#" @click="getCategoryTwo(item.id,index)">{{ item.name }}</a>
                </li>
              </ul>
            </dd>
          </dl>
          <dl>
            <dt>
              <span class="c-999 fsize14"></span>
            </dt>
            <dd class="c-s-dl-li">
              <ul class="clearfix">
                <li v-for="(item,index) in categoryTwo" :key="index">
                  <a :title="item.name" href="#">{{ item.name }}</a>
                </li>
              </ul>
            </dd>
          </dl>
          <div class="clear"></div>
        </section>
        <div class="js-wrap">
          <section class="fr">
            <span class="c-ccc">
              <i class="c-master f-fM">1</i>/
              <i class="c-666 f-fM">1</i>
            </span>
          </section>
          <section class="fl">
            <ol class="js-tap clearfix">
              <li>
                <a title="关注度" href="#">关注度</a>
              </li>
              <li>
                <a title="最新" href="#">最新</a>
              </li>
              <li class="current bg-orange">
                <a title="价格" href="#">价格&nbsp;
                  <span>↓</span>
                </a>
              </li>
            </ol>
          </section>
        </div>
        <div class="mt40">
          <!-- /无数据提示 开始-->
          <section class="no-data-wrap" v-if="total == 0">
            <span class="c-666 aaa ml10 vam"><b>没有汽车相关数据，正在努力获取新的汽车...</b></span>
          </section>
          <!-- /无数据提示 结束-->
          <!-- /数据列表 开始-->
          <article class="comm-course-list" v-if="total>0">
            <ul class="of" id="bna">
              <li v-for="item in automobilePage" :key="item.id">
                <div class="cc-l-wrap">
                  <section class="course-img">
                    <img :src="item.fileName" class="img-responsive" :alt="item.productName">
                    <div class="cc-mask">
                      <a :href="'/automobile/'+item.id" :title="item.productName"
                         class="comm-btn c-btn-1">{{ item.productName }}</a>
                    </div>
                  </section>
                  <h3 class="hLh30 txtOf mt10">
                    <a :href="'/automobile/'+item.id" :title="item.productName" class="course-title fsize18 c-333">{{
                        item.productName
                      }}</a>
                  </h3>
                  <section class="mt10 hLh20 of">
                    <span class="fr jgTag bg-green">
                      <i class="c-fff fsize12 f-fA">￥ {{ item.productPrice }}</i>
                    </span>
                    <span class="fl jgAttr c-ccc f-fA">
                        <i class="c-999 f-fA">汽车销量:{{ item.productSales }}</i>
                        |
                        <i class="c-999 f-fA">汽车库存:{{ item.productQuantity }}</i>
                      </span>
                  </section>
                </div>
              </li>
            </ul>
            <div class="clear"></div>
          </article>
          <!-- /数据列表 结束-->
        </div>
        <!-- 公共分页 开始 -->
        <!--
分页器
当前第几页,数据总页数，每一页展示条数，连续页码数
@current-change="handleCurrentChange"
:current-page代表当前第几页
:total代表分页器需要展示数据的条数
:page-size代表分页器每页需要展示的条数
:page-sizes代表可以设置每页需要展示的条数
layout:可以实现分页器布局
pager-count按钮的数量 如果是6连续页码是4
-->
        <el-pagination v-if="total>0"
                       style="margin-top: 20px;textAlign:center"
                       :current-page="page"
                       :total="total"
                       :page-size="limit"
                       layout="prev, pager, next,jumper,->,total"
                       @current-change="getPage"
        >
        </el-pagination>
        <!-- 公共分页 结束 -->
      </section>
    </section>
    <!-- /课程列表 结束 -->
  </div>
</template>
<script>

import automobileList from '../../api/automobile/automobile'

export default {

  data() {
    return {
      //  汽车分页数据
      automobilePage: [],

      //一级分类
      categoryOne: [],
      //二级分类
      categoryTwo: [],

      page: 1,  //当前页
      total: 0, //总记录数
      limit: 8,  //每页需要展示的条数
    }
  },
  created() {

    //  一级二级分类
    this.getAllCategory();

    this.getPage();

  },


  methods: {

    //获取一级分类和二级分类
    getAllCategory() {
      automobileList.getAllCategory().then(response => {
        console.log(response)
        this.categoryOne = response.data.data.list
        console.log(this.categoryOne)
      })
    },

    //点击一级分类显示二级分类查询数据
    getCategoryTwo(categoryOneId, index) {
      console.log(index)
      //  拿着一级分类id和所有一级分类id做比较
      //  如果id相同,从对应的一级分类里面获取对应的二级分类
      for (let i = 0; i < this.categoryOne.length; i++) {
        // 获取每个一级分类
        var oneCategory = this.categoryOne[i]
        //  比较id是否相同
        if (categoryOneId == oneCategory.id) {
          this.categoryTwo = oneCategory.children
        }
      }
    },


    getPage(page = 1) {
      this.page = page
      automobileList.getAutomobileList(this.page, this.limit).then(response => {
        this.total = response.data.data.total;
        // console.log(response)
        this.automobilePage = response.data.data.items
        // console.log(this.automobilePage)

      })
    },

  },

};
</script>
